/**
 * 流程标题右侧"流程详情"按钮弹出框内容
 */
import { useForm } from "../../framework/common/context/metadata-context";
import clsx from "clsx";
import { useUpdate } from "ahooks";
import { useSubscribe } from "../../framework/common/eventBus";
export default function({tplData}){
    const updater = useUpdate();

    //更新监控人
    useSubscribe("monitor.update", ()=>{
        updater();
    })

    if(!(tplData && tplData.ProcessInfo)){//不存在流程信息直接返回null
        return null;
    }
    //返回监控人的文本信息
    function getMonitorText(monitors){
        if(!monitors || monitors.length <=0){
            return "";
        }
        var monitorText = [];
        monitors.filter(function(item){
            if(item.is_show == "1"){
                monitorText.push(item.auditor_name)
            }
        })
        monitorText = monitorText.join("、");
        return monitorText;
    }

    let processInfo = tplData.ProcessInfo;//流程信息
    let monitors = processInfo.newMonitors || processInfo.Monitors;//监控人

    return <>
        <table width="100%" className="table-ProcessList">
            <colgroup>
                <col width=""/>
                <col/>
            </colgroup>
            <tbody>
                <tr>
                    <td className="align-top left w-80px">所属业务：</td>
                    <td className="align-top right">{processInfo.PackageName}</td>
                </tr>
                <tr>
                    <td className="align-top left w-70px">所属模板：</td>
                    <td className="align-top right">{processInfo.ProcessModulePath}{processInfo.ProcessModuleName}</td>
                </tr>
                <tr>
                    <td className="align-top left">流程状态：</td>
                    <td className="align-top right">{processInfo.ProcessStatusName}</td>
                </tr>
                <tr>
                    <td className="align-top left">紧急程度：</td>
                    <td className={clsx("right align-top", (processInfo.ProcessLevel != 0 && "red"))}>{processInfo.ProcessLevelName}</td>
                </tr>
                <tr>
                    <td className="align-top left">发起人：</td>
                    <td className="align-top right">{processInfo.OwnerName}</td>
                </tr>
                <tr>
                    <td className="align-top left">监控人：</td>
                    <td className="align-top right" >{getMonitorText(monitors)}</td>
                </tr>
            </tbody>
        </table>
    </>
}